<template>
	<view class="cpm-nav-bar">
		<view :style="{height: customeNavBarHeight}"></view>
		<u-navbar :title="title" :fixed="true" bgColor="#273368" leftIconColor="#fff">
			<view class="content-left" slot="left">
				<!-- 返回按钮 -->
				<u-icon v-if="!isTabBarPage && pagesLen > 1" name="arrow-left" size="19" color="#fff" hoverClass="btn-hover"
					@click="handleBack"></u-icon>
				<!-- 回到首页按钮 -->
				<u-icon v-if="!isTabBarPage && pagesLen <= 1" name="home-fill" size="30" color="#fff" hoverClass="btn-hover" class="home-btn" @click="goHome"></u-icon>
				<view v-if="!isTabBarPage" class="gap"></view>
				<!-- 用户头像 -->
				<u-avatar :src="userInfo.avatarUrl" size="26" @click="handleClick" hover-class="btn-hover"></u-avatar>
			</view>
			<view class="content-center u-line-1" slot="center">
				{{title}}
			</view>
		</u-navbar>
	</view>
</template>

<script>
	import store from '@/store'
	import {
		checkLogin as hasLogin
	} from '@/utils/app.js'
	import {
		isEmpty
	} from '@/utils/util'
	
	export default {
		name: "CustomNavBar",
		props: {
			title: {
				type: String
			},
		},

		data() {
			return {
				// tabbar页面路径数组
				tabBarList: ['/pages/index/index', '/pages/exhibitor/exhibitor', '/pages/products/products',
					'/pages/lives/lives', '/pages/booth/booth'
				],
				// 当前是否tabbar页面
				isTabBarPage: false,
				// 当前页面栈数量
				pagesLen: 1,
				// 是否已登陆
				isLogin: false,
				// 用户信息
				userInfo: {
					avatarUrl: '/default_avatar'
				},
				// 自定义导航栏高度
				customeNavBarHeight: '64px'
			};
		},
		
		created() {
			// const options = uni.getLaunchOptionsSync()
			// 获取页面栈数量
			this.pagesLen = getCurrentPages().length
			
			// 设置自定义导航栏高度
			const height = uni.$u.addUnit(uni.$u.getPx(uni.$u.props.navbar.height) + uni.$u.sys().statusBarHeight)
			this.customeNavBarHeight = height
			
			// 当前是否tabbar页面
			this.isTabBarPage = this.tabBarList.some(item => item === uni.$u.page())

			// 当前是否已登陆
			this.checkLogin()
		},
		
		methods: {
			
			// 判断是否已登陆
			checkLogin() {
				this.isLogin = hasLogin()
				if(this.isLogin) {
					this.userInfo = store.getters.userInfo
				}
			},
			
			// 返回事件
			handleClick() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/user'
					})
				} else {
					wx.getUserProfile({
						desc: '完善用户资料',
						success: ({
							userInfo
						}) => {
							this.onAuthSuccess(userInfo)

						}
					})
				}
			},
			
			// 回到首页
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},

			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log('code', res.code)
							resolve(res.code)
						},
						fail: reject
					})
				})
			},

			async onAuthSuccess(userInfo) {
				const app = this
				// 提交到后端
				store.dispatch('LoginMpWx', {
						partyData: {
							code: await app.getCode(),
							oauth: 'MP-WEIXIN',
							userInfo
						},
						refereeId: store.getters.refereeId
					})
					.then(result => {
						// 一键登录成功
						uni.$u.toast('登陆成功')
						// 设置登陆状态
						this.isLogin = true
						// 设置用户头像
						this.userInfo = userInfo
						// 跳转回原页面
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/user'
							})
						}, 2000)
					})
					.catch(err => {
						console.log(err)
						const resultData = err.result.data
						if (isEmpty(resultData)) {
							// 显示错误信息
							uni.$u.toast(err.result.message)
						}
					})
			},

			// 点击返回事件
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-left {
		display: flex;
		align-items: center;

		.btn-hover {
			opacity: .7;
		}

		.gap {
			width: 16rpx;
		}
		
		.home-btn{
			border: solid 1px #fff;
		}
	}

	.content-center {
		max-width: 280rpx;
		color: #fff;
	}
</style>
